<template>
	<view class="zone">
		<Header title="转赠好友"></Header>
		<view class="main">

			<view class="xianyu">
				<view class="xianyu_tile">
					我的余额
				</view>
				<view class="xianyu_box">
					<view class="xianimg">
						<view class="timg">
							<image class="timg2" src="http://image.qxgm.site/tdz/img/my/smg-02.png" mode="widthFix"></image>
						</view>
						<view class="xianjif">
							灵石：{{userinfo.lingshi}}
						</view>
					</view>
				</view>
			</view>
			<view class="sboxg">
				<view class="linkbox">
					<view class="title">
						<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix"></image>
						<text>转赠</text>
						<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix"></image>
					</view>
					<view class="tipzen">
						转赠数量
					</view>
					<view class="sipt">
						<input type="number" @input="changeall" v-model="sendNum" class="ipt" placeholder="请输入要转赠的数量"
							placeholder-class="iptplace" />
					</view>
					<view class="tipzen">
						好友ID
					</view>
					<view class="sipt">
						<input type="number" @blur="blurchange()" v-model="sendID" class="ipt"
							placeholder="请输入好友ID(邀请码)" placeholder-class="iptplace" maxlength="6"/>
						<view class="touxbox hidden">
							<image class="touxiang" :src="pimg" mode="widthFix" style="border-radius: 50%;"></image>
							<text>{{name}}</text>
						</view>
					</view>
					<view class="tipzen">
						预计扣除
					</view>
					<view class="sipt">
						<input type="number" v-model="duction" :disabled="true" class="ipt" placeholder="自动填写"
							placeholder-class="iptplace" />
					</view>

					<view class="shouxufei">
						当前手续费：{{commission}}%
					</view>
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="confirm"
						@click="confirmTranfer">确认转赠</u-button>
				</view>
				<view class="hbox">
					<view class="tisi">
						提示
					</view>
					<view class="tp1">
						1.请确认接收人ID，赠送后无法追回。
					</view>
					<view class="tp1">
						2.平台禁止灵石倒卖出售，一经发现严肃处理!
					</view>
				</view>
			</view>
		</view>
		<!-- 转赠好友 -->
        <u-mask :show="sucessShow">
			<view class="warp">
				<image class="mask1" src="http://image.qxgm.site/tdz/img/public/mask1.png" mode="widthFix"></image>
				<view class="mask_content">
					<view class="m_info">
						<view class="m_title">
							<image src="http://image.qxgm.site/tdz/img/public/l1.png" mode="widthFix" />
							<text>转赠好友</text>
							<image src="http://image.qxgm.site/tdz/img/public/r1.png" mode="widthFix" />
						</view>
						<view class="jihuop">
							您将赠送<text class="t1">{{sendNum}}</text>给好友{{sendID}}<br>
							预计扣除<text class="t2">{{duction}}</text>
						</view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"
							class="getLevel" @click="againCofirm">确认转赠</u-button>
						<view class="sendtip">
							当前灵石:{{userinfo.lingshi}}
						</view>

					</view>
				</view>
				<image class="m_close" @click="sucessShow = false" src="http://image.qxgm.site/tdz/img/public/cha.png" mode="widthFix" />
				<image class="mask3" src="http://image.qxgm.site/tdz/img/public/mask3.png" mode="widthFix"></image>
			</view>
		</u-mask> 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commission: '',
				sendNum: '',
				sendID: '',
				duction: '',
				pimg: '',
				name: '',
				sucessShow: false,
                userinfo:{}
			}
		},
		onShow() {
            this.getUserInfo();
            this.getcommission()
		},
		onLoad(options) {
			// this.stat = options.id
			// console.log(this.stat);
		},
		methods: {
            async getcommission(){
                let res = await this.$http.index.getcommission()
                if (res.code == 1) {
                	this.commission = res.data
                }
            },
            // 获取个人信息
            async getUserInfo() {
            	let res = await this.$http.index.getUserInfo()
            	if (res.code == 1) {
            		this.userinfo = res.data
            	}
            },
			// 确定转赠
			confirmTranfer() {
				if (this.sendNum == null || this.sendNum == '' || this.sendNum <= 0) {
					this.$u.toast('请输入转赠数量')
					return
				}
                
                if (this.sendNum > 9999) {
                	this.$u.toast('单次转赠数量过大，不能大于9999')
                	return
                }
                
                if (this.sendNum < 5) {
                	this.$u.toast('最小转赠数量为5')
                	return
                }
                
                var reg = /^[1-9]\d*$/
                if(!reg.test(this.sendNum)) {
                    this.$u.toast('转赠数量需为整数')
                    return
                }
                
				if (this.sendID == null || this.sendID == '' ) {
					this.$u.toast('请输入转赠ID')
					return
				}
                
				this.sucessShow = true

			},
			// 确认赠送
			async againCofirm() {
                
				let res = await this.$http.index.transfer({
                    invite_code:this.sendID,
                    num:this.sendNum
                })
                this.$u.toast(res.msg)
				if (res.code == 1) {
                    this.getUserInfo()
					this.sucessShow = false
				}
			},
            
			// 失去焦点时触发
			blurchange() {
				if (this.sendID.length < 7) {
					this.getUInfo()
				} else {
                    this.name = this.pimg = ''
					this.$u.toast('请输入正确的ID')
				}
			},
			changeall(){
				this.duction = (parseFloat(this.sendNum) + parseFloat(this.sendNum * (this.commission / 100))).toFixed(2)
			},
            
			// 获取要转赠人的昵称头像
			async getUInfo() {
				let res = await this.$http.index.getUInfo({
					invite_code: this.sendID
				})
				if (res.code == 1) {
                    if(res.data.length == 0){
                        this.$u.toast('未查找到转赠人')
                        this.name = this.pimg = ''
                    }else{
                        this.pimg = res.data.avatar ? res.data.avatar : 'http://image.qxgm.site/tdz//static/images/avatar.png';
                        this.name = res.data.username ? res.data.username : '天道新人';
                        
                    }        
				} else {
					this.$u.toast(res.msg)       
				}
			},
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% auto;
	}

	.linkbox {
		background: url(http://image.qxgm.site/tdz/img/public/p_bg2.png) no-repeat;
		background-size: 100% 100%;
		margin-top: 10px;
		padding: 12px 12px 14px;
	}

	.title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 16px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-05.png) no-repeat;
		background-size: 100% 100%;
		padding: 10px 0 8px;

		image {
			width: 18%;
		}

		text {
			font-size: 20px;
			font-weight: normal;
			color: #50463E;
			line-height: 20px;
			margin: 0 13px;
		}
	}

	.sboxg {
		padding: 18px 6px 18px 22px;
		background: url(http://image.qxgm.site/tdz/img/public/info.png) no-repeat;
		background-size: 100% 100%;
	}

	.tabs {
		width: 100%;
		padding: 0 16px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.tab {
			width: 30%;
			background: url(http://image.qxgm.site/tdz/img/public/tab2.png) no-repeat;
			background-size: 100% 100%;
			text-align: center;
			font-size: 14px;
			font-weight: normal;
			color: #FFFED0;
			line-height: 27px;
		}

		.act {
			color: #A97D45;
			background: url(http://image.qxgm.site/tdz/img/public/tab1.png) no-repeat;
			background-size: 100% 100%;
		}
	}

	.xianyu {
		text-align: center;
		padding: 10px 0 25px;
		background: url(http://image.qxgm.site/tdz/img/xianyu/mg-01.png) no-repeat;
		background-size: 100% 100%;
	}

	.xianyu_tile {
		font-size: 21px;
		font-weight: normal;
		color: #FFFFFF;
		line-height: 24px;
		background: linear-gradient(0deg, #FFFF99 0%, #FFFDE1 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.xianyu_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.xianimg {
		width: 33%;
	}

	.xianjif {
		font-size: 14px;
		font-weight: normal;
		color: #FFFFCC;
		line-height: 24px;
	}

	.timg {
		width: 100%;
		box-sizing: border-box;
		padding: 0 10%;

		.timg2 {
			width: 66%;
		}
	}


	.sipt {
		position: relative;
		background: #bcb8ba;
		border-radius: 1px;
		margin-bottom: 11px;
		height: 40px;
		padding: 10px 0 12px 7px;
		box-sizing: border-box;
	}

	.touxbox {
		position: absolute;
		top: 2px;
		right: 10px;
		display: flex;
		align-items: center;

		.touxiang {
			width: 36px;
		}

		text {
			font-size: 15px;
			font-weight: normal;
			color: #666666;
			margin-left: 6px;
		}
	}

	.tipzen {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 24px;
		margin-bottom: 8px;
		margin-left: 12px;
	}

	.iptplace {
		font-size: 15px;
		font-weight: normal;
		color: #666666;
		line-height: 21px;
	}

	.ipt {
		font-size: 15px;
		font-weight: normal;
		color: #333333;
		line-height: 21px;
	}

	.shouxufei {
		font-size: 15px;
		font-weight: normal;
		color: #666666;
		line-height: 15px;
		text-align: center;
		margin-bottom: 13px;
	}

	.confirm {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.hbox {
		background: url(http://image.qxgm.site/tdz/img/zhuanzeng/sbg.png) no-repeat;
		background-size: 100% 100%;
		margin-top: 9px;
		padding: 8px 18px 18px;
	}

	.tisi {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 14px;
		margin-bottom: 11px;
	}

	.tp1 {
		font-size: 14px;
		font-weight: normal;
		color: #333333;
		line-height: 14px;
		margin-bottom: 7px;
	}

	.jihuop {
		display: block;
		margin: 2vh auto 0;
		width: 72%;
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 24px;

		.t1 {
			font-size: 18px;
			font-weight: normal;
			color: #ED519F;
			line-height: 24px;
			background: linear-gradient(0deg, #FF15E6 0%, #FF7800 95.1171875%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}

		.t2 {
			font-size: 18px;
			font-weight: normal;
			color: #4587FF;
			line-height: 24px;
		}
	}

	.getLevel {
		display: block;
		margin: 13px auto 0;
		width: 36%;
		font-size: 18px;
		font-weight: normal;
		color: #f9e5b6;
		text-shadow: 0 1px 1px #CB6500;
		background: url(http://image.qxgm.site/tdz/img/public/anniu.png) no-repeat;
		background-size: 100% 100%;
	}

	.sendtip {
		font-size: 15px;
		font-weight: normal;
		color: #50433A;
		line-height: 24px;
		text-align: center;
		margin-top: 10px;
	}
</style>